<template>
  <div>
    <div class="article-container">
      <div class="daohang">
      <a @click="repairRoute()">我的报修</a>
      <span>&nbsp; >&nbsp;</span>报修详情
      </div>
      <hr>
      <!-- 报修详情头部 -->
      <el-card style="width: 1100px;">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="repair-person">
              <el-descriptions :column="1">
                <el-descriptions-item label="报修人" name="1">
                  {{ repairInfo.repairUserName }}
                </el-descriptions-item>
                <el-descriptions-item label="联系电话" name="2">
                  {{ repairInfo.repairUserPhone }}
                </el-descriptions-item>
              </el-descriptions>
<!--              <el-avatar src="../assets/img/user-img.png" :size="100"></el-avatar>-->
            </div>
          </el-col>

          <el-col :span="16">
            <el-descriptions :column="2">
              <el-descriptions-item label="编号">{{ repairInfo.repairNum }}</el-descriptions-item>
              <el-descriptions-item label="预约维修时间">{{ repairInfo.appointmentTime }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1">
              <el-descriptions-item label="维修项目">{{ repairInfo.repairType }}</el-descriptions-item>
              <el-descriptions-item label="故障描述">{{ repairInfo.repairContent }}</el-descriptions-item>
              <el-descriptions-item label="开始时间">{{ repairInfo.repairTime }}</el-descriptions-item>
              <el-descriptions-item label="区域地址">{{ repairInfo.repairInfo }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>

      <!-- 用料信息 -->
      <div class="material-info-container" v-if="isWorkerOrAdmin">
        <el-card style="width: 1100px; margin-top: 20px;">
          <span style="font-size: 30px;color: #666;">用料信息</span>
          <el-table :data="repairInfo.materials" empty-text="暂无数据" style="width: 100%">
            <el-table-column prop="materialCode" label="材料编码" style="width: 33%" align="center"/>
            <el-table-column prop="materialAllName" label="材料全称" style="width: 34%" align="center"/>
            <el-table-column prop="count" label="数量" style="width: 33%" align="center"/>
          </el-table>
        </el-card>
      </div>

      <el-row :gutter="10" style=" width: 1100px">
        <el-col span="12">
          <div class="status-flow">
            <el-timeline class="custom-timeline">
              <el-timeline-item
                  v-for="(log, index) in reversedRepairLogDTOList"
                  :key="log.repairLogId"
                  :timestamp="log.operDate"
                  placement="top"
                  :color="index === 0 ? '#e6a23c' : '#0023F5'"
                  :icon="index === 0 ? 'el-icon-edit' : 'el-icon-check'">
                <el-card shadow="hover" class="custom-card">
                  <div class="timeline-content">
                    <h4 class="timeline-title">{{ log.operName }}</h4>
                    <p class="timeline-reason">{{ log.operReason }}</p>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
        <el-col span="12" :offset="5">
          <!-- 报修照片 -->
          <div class="col-md-4 mar-t30">
            <!-- 标题部分 -->
            <div class="ft18">
              <img src="../assets/img/icon07.png" width="28" height="26" alt="icon" />
              报修照片
            </div>

            <!-- 图片展示区域 -->
            <div class="repair-img-tab mar-t10" @click="openViewer(0)">
              <div class="tab-img">
                <i></i>
                <img :src="repairPhotoList[1]" v-if="repairPhotoList.length > 1" alt=" " @click.stop="openViewer(1)" />
              </div>
              <div style="z-index:1">
                <img :src="repairPhotoList[0]" v-if="repairPhotoList.length > 0" width="340" height="228" @click.stop="openViewer(0)" />
              </div>
            </div>

            <!-- 图片预览组件 -->
            <el-image-viewer
                v-if="isViewerVisible"
                :url-list="repairPhotoList"
                :initial-index="currentIndex"
                @close="isViewerVisible = false"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>



<script>
import {
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElCard,
  ElAvatar,
  ElDescriptions,
  ElDescriptionsItem,
  ElTimeline,
  ElTimelineItem,
  ElImage,
  ElIcon,
} from 'element-plus';
import axios from 'axios';
import { Picture as IconPicture } from '@element-plus/icons-vue'; // 导入 IconPicture 图标组件
import { ElMessage } from 'element-plus';

export default {
  components: {
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElButton,
    ElCard,
    ElAvatar,
    ElDescriptions,
    ElDescriptionsItem,
    ElTimeline,
    ElTimelineItem,
    ElImage,
    ElIcon,
    IconPicture, // 注册 IconPicture 图标组件
  },
  name: 'repair-info',
  data() {
    return {
      repairId: this.$route.params.id,
      repairNum: this.$route.params.num,
      repairInfo: {},
      repairLogDTOList: [], // 添加日志数组
      repairPhotoList: [], // 添加图片数组
      roleName: '', // 用户角色
      // 是否显示图片预览
      isViewerVisible: false,
      // 当前图片的索引
      currentIndex: 0,
    };
  },
  computed: {
    isWorkerOrAdmin() {
      return this.roleName === '维修员' || this.roleName === '管理员';
    },
    reversedRepairLogDTOList() {
      return [...this.repairLogDTOList].reverse();
    }
  },
  mounted() {
    this.fetchRepairInfo();
    this.roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleName
  },
  methods: {
    // 打开图片预览
    openViewer(index) {
      this.currentIndex = index;
      this.isViewerVisible = true;
    },
    // 关闭图片预览
    closeViewer() {
      this.isViewerVisible = false;
    },
    repairRoute(){
      if (this.roleName === '维修员'){
        this.$router.push('/repair-list-worker');
      }else {
        this.$router.push('/repair-list-user');
      }
    },
    navigateTo(route) {
      this.$router.push(route)
    },
  async fetchRepairInfo() {
    const repairId = Number(this.repairId);
    const repairNum = this.repairNum;

    if (isNaN(repairId)) {
      this.$message.error("维修记录ID无效，请输入有效的数字");
      return;
    }

    if (!repairNum) {
      this.$message.error("维修单号无效，请输入有效的维修单号");
      return;
    }
    try {
      const response = await axios.get('/repaircenter/repair/selectRepairById', {
        params: {
          repairId: repairId,
          repairNum: repairNum
        }
      });
      if (response.data.code === 200) {
        this.repairInfo = response.data.data;
        console.log(response.data.data)
        this.repairLogDTOList = response.data.data.repairLogDTOList || []; // 假设日志数据在 data.data.repairLogDTOList 中
        this.repairPhotoList = response.data.data.repairPhotoList || [];
        this.repairInfo.materials = response.data.data.repairMaterialDTOList || []; // 添加用料信息
      } else {
        this.$message.error("获取报修信息失败");
      }
    } catch (error) {
      this.$message.error("获取报修信息失败");
      console.error(error);
    } finally {
      this.loading = false; // 数据获取完成后关闭加载状态
    }
  },
},

};
</script>

<style scoped>
.article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-top: 110px;
}

.repair-person {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.daohang {
  width: 83%;
  text-align: left;
  border-bottom: 1px solid #00000017;
  background: url(../assets/img/icon-location-blue.png) no-repeat -8px 8px;
  background-position: 12px,0px; /* 调整位置 */
  padding-left: 30px;
}

.status-flow {
  margin-top: 20px;
}

.repair-photo {
  margin-top: 20px;
  text-align: center;
}

/* 添加自定义样式 */
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.image-slot .el-icon {
  font-size: 30px;
}

.material-info-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
.status-flow {
  padding: 20px;
  border-radius: 8px;
}

.custom-timeline {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 0;
}

.el-timeline-item {
  margin-bottom: 20px;
}

.custom-card {
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

.timeline-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.timeline-reason {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.el-timeline-item__timestamp {
  font-size: 12px;
  color: #999;
}



.material-info-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.el-table {
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

.el-table th {
  background-color: #f5f7fa;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 12px 8px;
  border-bottom: 1px solid #eaeaea;
}

.el-table td {
  font-size: 13px;
  color: #666;
  text-align: center;
  padding: 10px 8px;
}

.el-table .el-table__row {
  transition: background-color 0.3s;
}

.el-table .el-table__row:hover {
  background-color: #f9f9f9;
}

.el-table__empty-text {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
</style>
